<template>
    <div ref="lineChart" style="width: 100%; height: 300px;"></div>
  </template>

  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import * as echarts from 'echarts'

  const lineChart = ref(null)
  let chart = null

  const initChart = () => {
    const chartDom = lineChart.value
    chart = echarts.init(chartDom)

    const option = {
      title: {
        text: '月增用户趋势',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisLine: {
          lineStyle: {
            color: '#909399'
          }
        }
      },
      yAxis: {
        type: 'value',
        max: 250,
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        axisLine: {
          show: false
        }
      },
      series: [
        {
          name: '用户数',
          type: 'line',
          data: [100, 150, 210, 100, 150, 200, 120, 160, 150, 200, 190, 200],
          smooth: true, // 平滑曲线
          lineStyle: {
            color: '#409EFF',
            width: 2
          },
          symbol: 'circle', // 数据点的形状
          symbolSize: 8, // 数据点的大小
          itemStyle: {
            color: '#409EFF',
            borderWidth: 2,
            borderColor: '#fff'
          },
          areaStyle: { // 添加区域填充
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(64,158,255,0.2)'
              }, {
                offset: 1,
                color: 'rgba(64,158,255,0)'
              }]
            }
          }
        }
      ]
    }

    chart.setOption(option)
  }

  // 监听窗口大小变化
  const handleResize = () => {
    chart && chart.resize()
  }

  onMounted(() => {
    initChart()
    window.addEventListener('resize', handleResize)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    chart && chart.dispose()
  })

  </script>

  <style scoped>
  /* 可以添加自定义样式 */
  </style>
